﻿
.burger {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;   
  width: 70px;
  height: 70px; 
  z-index: 50;

  background-color: transparent;
  border: none;

  outline: none;
  }

  .burger-content{
  	position: fixed;
  	top: 40rem;
  	right: 10rem;
  	width: 75rem;
  	height: 75rem;
  }

	.burger-line {
	  position: relative;
	  z-index: 40;
	  display: block;
	  width: 40px;
	  height: 4px;
	  background-color: white;
	  margin-bottom: 10px;
	  transition: all 0.3s;
	  transform-origin: 0% 50%;
	}


	.burger.active .burger-line:nth-child(1) {
	  transform-origin: 0% 50%;
	  transform: rotate(45deg);
	  background-color: black;
	}

	.burger.active .burger-line:nth-child(2) {
	  opacity: 0;
	}

	.burger.active .burger-line:nth-child(3) {
	  transform-origin: 0% 50%;
	  transform: rotate(-45deg);
	  background-color: black;
	}


	.burger-bg{
		position: absolute;
		z-index: 39;
	    top: -21rem;
	    left: -17px;
		width: 100%;
	    height: 100%;
	    border-radius: 100%;
	    transform-origin: center center;
	    opacity: 0;
	    transition: all .3s;
	    background-color: rgba(35, 34, 34, 9);
	}

		.burger-bg.active {
		    opacity: 1;
		    transition: all .3s;
	    }

/* Format smartphone IPHONE 6/7/8 */
  @media screen and (max-width: 729px) {

  /**{
      outline: 2px dotted green;
    } */

     .burger {
	    display: block;
	  }


	  .site-header-wrapper{
	  	width: 100%;
	  	padding-left: 30rem;
	  	position: relative;
	  }


	  .nav{
	  	margin: 0;
		display: block;

        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;

        width: 100%;
        height: 100vh;
        padding-top: 150px;
        background-color: rgba(0, 0, 0, 0.9);
 
        opacity: 0;
        transition: 0.5s;
        transform: translateY(-100%);  

        flex-direction: column;
        justify-content: flex-start;
 

       	 }


        	.nav.active{  
        	  position: fixed; 	  
	          opacity: 1;
	          transform: translateY(0%);
	          background-color: white;

      		  }


      		.nav a{
      			display: block;
      			padding-left: 30rem;
				font-size: 30px;

				color: black;

      		}
        	.icons-nav{
        		display: none;
        	}

	.scroll_to_top{
		display: none;
	}


	.btn-black-border.blanc.position{
		top:240rem;
	}
/*   HEADER  */

	.header-bg{
		min-height: 668rem;
		background-position: 65% 10%;
		}


		.site-header-wrapper{
			width: 100%;
		}

		.header-content{
			width: 100%;
			padding-left: 30rem;
			margin: 190rem auto 0rem auto;
		}
			.header-txt{
				width: 314rem;
			}
				.header-titre{
				width: 285rem;
				line-height: 40rem;
				}
				.header-texte{
					width: 100%;
				}

			.btn-black-border.blanc {
   				 margin-top: 20rem;
   				 }

/* PRESENTATION */

	.presentation-content{
		width: 314rem;
		margin: 50rem auto;                                                                                                         

	}

/* ARGUMENTAIRE */

.article-content{
	flex-direction: column-reverse;
	width: 314rem;
	margin:0rem auto 70rem auto;
}

	.article-content.skinreverse{
		flex-direction: column;
	}

	.content-parallax{
		margin-left: 0;
	}
		.article-img img{
			width: 100%;
			margin: 0rem;
		}

			.article-img-position.skin1{
				margin-left: 5rem;
			}
				.article-img-log.skin1{
				    top: 425rem;
				    left: 0rem;
				}

			.article-img-position.skin2{
				margin-left: 20rem;
			}
				.article-img-log.skin2{
				    top: 425rem;
				    left: 20rem;
				}


			.article-img-position.skin3{
				width: 100%;
				transform: translateY(-20px);
				margin-top: 0rem;
				margin-left: 20rem;
				
			}

				.article-img-log.skin3{
				    top: 425rem;
				    left: 20rem;
				}



	.article-texte-content{
		width: 100%;
		margin: 50rem auto;
		text-align: center;
	}

		.fade-txt{
			opacity: 1;
			transition: all 1s;
			transform: translateY(10rem);
		}
		.article-texte-titre{
			margin: 10rem 0rem 27rem 0rem;
		}

		.content-parallax{
			width: 100%;
		}






/* VIDEO */
	.video{
		width: 100%;
		min-height: auto;
		margin: auto;
		overflow: hidden;

	}
	
	.video-titre{
		width: 100%;
		padding: 20rem 100rem 20rem 100rem
	}

	.video-annonce{
		position: relative;
		width: 500rem;
		height: auto;
		top: 0;
		left: -64rem; 
		background-color: transparent;
		
	}

/* ABONNEMENT*/
	.abonnement-content{
		width: 100%;
	}

	.abonnement-bloc{
		flex-direction: column;
		margin: 0rem auto 85rem auto;
	}

	.bloc{
		margin: 40rem auto 0rem auto ;
	}

		.bloc .btn-black-border.blanc {
			margin-top: 40rem;
		}

/* FORMULAIRE */
.formulaire{
	display: block;
	min-height: 1150rem;
	margin-bottom: 50rem;
}
	.formulaire-content{
		width: 100%;
	}

		.form-titre{
			width: 100%;
			margin-left: 0;
			padding: 0rem 30rem 0rem 30rem;
		}

		.form-bloc-content{
			flex-direction: column;
		}

			.form-left{
				width: 100%;
				min-height: 690rem;
			}

			.form-content{
				margin: 0rem;
			  	width: 100%;
			  	padding: 155rem 30rem 55rem 30rem;
			}

			.form-txt{
				margin-top: 30rem;
			}

			#message{
				width: 314rem;
			}

		.form-img{
			width: 100%;
			min-height: 450rem;
			background-size:100%;
			background-repeat: no-repeat;
		}

/* NEWSLETTER */	
	.site-news-letter{
		overflow: hidden;

	}
		.site-news-letter-titre{
			height: auto;
			padding: 0 30rem 0 30rem;
		}

		.site-news-letter-content{
			width: 100%;
			top: 11rem;
		}
			.site-news-letter-content p{
				width: 100%;
				padding: 0 30rem 0 30rem;
			}

			.form-newsletter-field {
				width: 246rem;
			}

			.form-newsletter{
				width: 100%;
				text-align: center;
			}

/* FOOTER */

	.site-footer{
		padding: 21rem 30rem 20rem 30rem;
	}
	.site-footer-content-nav{
		width: 100%;
		height: auto;

	}

		.site-nav-footer-item{
			display: flex;
	  		flex-wrap: wrap;
	  		margin-bottom: 20rem;
		}

		.site-nav-footer-item li {
			margin: 10rem 28rem 10rem 28rem;
		}




	h1{
	font-family: poppins, sans-serif;
	font-weight: 700;
	font-size: 36rem;
	line-height: 40rem;
	text-transform: uppercase;

	margin-bottom: 10rem;
	}

	.lien-article-presentation{
		margin-top: 10rem;
		border-bottom: 1.5rem solid white;
	}

	.lien-article-presentation-actu{
		margin-top: 10rem;
		border-bottom: 1.5rem solid black;
	}

	}




